<nav>
    <header>
        <a href="/">
        {% block logo %}
        <span class="tb-logo">
            <span class="logo">
                <span class="l">T</span>
                <span class="r">B</span>
            </span>
            <b>TeraBlog</b>
        </span>
        {% endblock logo %}
        </a> 
        <label for="nav"><i class="fas fa-bars"></i></label>
    </header>
    <input type="checkbox" id="nav" hidden checked>
    <div overflow>
        <ul>
            <li {% if request.resolver_match.url_name == 'home' %}active{% endif %}><a href="/">Home</a></li>
            <li {% if request.resolver_match.url_name == 'archive' %}active{% endif %}><a href="{% url 'archive' %}">Archive</a></li>
            <li {% if request.resolver_match.url_name == 'about' %}active{% endif %}><a href="#">About</a></li>
            <li {% if request.resolver_match.url_name == 'contact' %}active{% endif %}><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>